<template>
	<view class="order-container">
		<!-- 顶部背景 -->
		<view class="header-bg">
			<!-- 导航栏 -->
			<view class="nav-bar">
				<image class="back" src="/static/images/白色左箭头.png" mode="" @click="goBack"></image>
				<text class="nav-title">确认订单</text>
			</view>
		</view>

		<!-- 订单信息卡片 -->
		<view class="order-card">
			<!-- 订单进度 -->
			<view class="progress-bar">
				<view class="progress-item active"
					:style="{ transform: currentStep === 1 ? 'scale(1.2)' : 'scale(1)' }">
					<view class="progress-circle">
						<image src="/static/home/wash/矩形 4@3x.png" mode="aspectFit" class="progress-bg"></image>
						<text class="progress-text">预约服务</text>
					</view>
				</view>
				<view class="progress-item">
					<view class="progress-circle" :style="{ transform: currentStep === 2 ? 'scale(1.3)' : 'scale(1)' }">
						<image src="/static/home/wash/矩形 4 拷贝 2@3x.png" mode="aspectFit" class="progress-bg"></image>
						<text class="progress-text">支付订单</text>
					</view>
				</view>
				<view class="progress-item">
					<view class="progress-circle" :style="{ transform: currentStep === 3 ? 'scale(1.2)' : 'scale(1)' }">
						<image src="/static/home/wash/矩形 4 拷贝@3x.png" mode="aspectFit" class="progress-bg"></image>
						<text class="progress-text">门店服务</text>
					</view>
				</view>
			</view>

			<view class="divider"></view>

			<!-- 店铺信息 -->
			<view class="shop-info">
				<image src="/static/home/wash/商家@3x.png" class="shop-icon"></image>
				<view class="shop-detail">
					<text class="shop-name">伟业汽车美容店（人民路店）</text>
					<text class="shop-address">山阳区人民中路33号</text>
				</view>
			</view>

			<!-- 客户信息 -->
			<view class="customer-info">
				<view class="info-row">
					<image src="/static/home/wash/人员@3x.png" class="info-icon"></image>
					<text class="customer-name">张先生</text>
					<text class="customer-phone">18656894566</text>
				</view>
			</view>

			<!-- 车辆信息 -->
			<view class="car-info" @click="selectChe">
				<view class="info-row">
					<view>
						<image src="/static/home/wash/车辆-01@3x.png" class="info-icon"></image>
						<text class="car-detail">奔驰FWE4/豫A56487</text>
					</view>
					<image src="/static/home/wash/收起箭头小@3x.png"
						style="width: 20rpx; height: 30rpx; padding-left: 240rpx;" class="info-icon"></image>
				</view>
			</view>

			<!-- 服务产品 -->
			<view class="service-section">
				<view class="section-header">
					<text class="section-title">服务产品</text>
					<text class="select-more">共选择1项服务产品</text>
				</view>
				<view class="service-item">
					<text class="service-name">精洗汽车</text>
					<text class="service-price">¥39.9</text>
				</view>
			</view>

			<!-- 优惠券 -->
			<view class="coupon-section" @click="selectCoupon">
				<view class="info-row">
					<image src="/static/home/wash/优惠券@3x.png" class="info-icon"></image>
					<text>代金券/优惠券</text>
					<view class="coupon-right">
						<text class="coupon-value">-10元</text>
						<image src="/static/home/wash/收起箭头小@3x.png" style="width: 18rpx; height: 30rpx;"
							class="info-icon">
						</image>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="service-contact" @click="contactService">
				<image src="/static/home/wash/客服@3x.png" class="service-icon"></image>
				<text>联系客服</text>
			</view>
			<view class="price-submit">
				<view class="total-price">
					<text>合计：</text>
					<text class="price">¥39.9</text>
				</view>
				<button class="submit-btn" @click="submitOrder">提交订单</button>
			</view>
		</view>

		<!-- 支付密码弹窗 -->
		<uni-popup ref="payPopup" type="center">
			<view class="pay-popup">
				<view class="pay-header">
					<text class="close-icon" @click="closePayPopup">×</text>
					<text class="pay-title">请输入支付密码</text>
				</view>

				<view class="pay-content">
					<view class="merchant-name">车辆服务平台</view>
					<view class="pay-amount">¥39.90</view>
				</view>

				<view class="payment-method">
					<text>支付方式</text>
					<text class="method-more">零钱 ></text>
				</view>

				<!-- 支付密码输入框 -->
				<view class="password-input" @click="paySuccess">
					<input type="number" password maxlength="6" v-model="password" focus class="real-input" />
					<view class="fake-input">
						<view class="fake-item" v-for="(item, index) in 6" :key="index">
							<text v-if="password.length > index">•</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="servicePopup" type="bottom">
			<view class="service-popup">
				<view class="service-number">18642589456</view>
				<view class="action-buttons">
					<button class="action-btn copy-btn" @click="copyPhoneNumber">复制</button>
					<button class="action-btn cancel-btn" @click="closeServicePopup">取消</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		watch
	} from 'vue';

	const currentStep = ref(1); // 1: 预约服务, 2: 支付订单, 3: 门店服务

	const payPopup = ref(null);
	const password = ref('');

	const goBack = () => {
		uni.navigateBack();
	};
	const selectChe = () => {
		uni.navigateTo({
			url: '/pages/index/baoyang/nearbystores/storedetail/enterorder/selectche/selectche'
		});
	}
	const selectCoupon = () => {
		// 选择优惠券逻辑
		uni.navigateTo({
			url: '/pages/index/baoyang/nearbystores/storedetail/enterorder/youhuiquan/youhuiquan'
		});
	};

	// 显示支付弹窗
	const showPayPopup = () => {
		payPopup.value.open();
		currentStep.value = 2; // 切换到“支付订单”并放大
	};

	// 关闭支付弹窗
	const closePayPopup = () => {
		payPopup.value.close();
		password.value = ''; // 清空密码
		currentStep.value = 1; // 切换到“预约服务”并放大
	};

	// 修改提交订单方法
	const submitOrder = () => {
		currentStep.value = 2; // 切换到“支付订单”并放大
		showPayPopup();
	};

	// 监听密码输入
	watch(password, (newVal) => {
		if (newVal.length === 6) {
			// TODO: 处理支付逻辑
			console.log('支付密码输入完成');

			setTimeout(() => {
				closePayPopup();
			}, 1000);
			uni.navigateTo({
				url: '/pages/xiche/orderzhifu/orderzhifu'
			});
		}
	});
	const servicePopup = ref(null);

	// 显示客服弹出层
	const showServicePopup = () => {
		servicePopup.value.open();
	};

	// 关闭客服弹出层
	const closeServicePopup = () => {
		servicePopup.value.close();
	};

	// 复制电话号码
	const copyPhoneNumber = () => {
		uni.setClipboardData({
			data: '18642589456',
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'success'
				});
				closeServicePopup();
			}
		});
	};

	// 修改原有的底部按钮点击事件
	const contactService = () => {
		showServicePopup();
	};
	
	function paySuccess() {
		uni.navigateTo({
			url: "/pages/index/baoyang/nearbystores/storedetail/enterorder/paysuccess/paysuccess"
		})
	}
</script>

<style scoped>
	.order-container {
		min-height: 100vh;
		background: #F8F8F8;
	}

	.header-bg {
		background: #4080FF;
		height: 240rpx;
		position: relative;
	}

	.back {
		position: absolute;
		left: 15px;
		top: 15px;
		width: 15px;
		height: 15px;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 88rpx;
		padding: 0 30rpx;
		color: #fff;
	}

	.right-icons {
		display: flex;
		gap: 20rpx;
	}

	.icon {
		width: 48rpx;
		height: 48rpx;
	}

	.order-card {
		margin: -140rpx 30rpx 0;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 30rpx;
		position: relative;
		z-index: 1;
	}

	.progress-bar {
		display: flex;
		justify-content: space-around;
		padding: 20rpx 0 30rpx;
	}

	.progress-item {
		position: relative;
		width: 150rpx;
		height: 150rpx;
	}

	.progress-circle {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.progress-bg {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.progress-text {
		position: relative;
		z-index: 1;
		font-size: 26rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 32rpx;
		padding: 0 20rpx;
	}

	.progress-item.active .progress-bg {
		transform: scale(1.1);
	}

	.divider {
		height: 1rpx;
		background: #EEEEEE;
		margin: 0 -30rpx 30rpx;
	}

	.shop-info {
		display: flex;
		align-items: center;
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.shop-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.shop-detail {
		display: flex;
		flex-direction: column;
	}

	.shop-name {
		font-size: 32rpx;
		font-weight: 500;
		margin-bottom: 8rpx;
	}

	.shop-address {
		font-size: 24rpx;
		color: #999;
	}

	.info-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.info-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.customer-phone {
		margin-left: auto;
		color: #999;
		font-size: 28rpx;
	}

	.arrow-right {
		margin-left: auto;
		color: #999;
		transform: rotate(-90deg);
	}

	.service-section {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.select-more {
		font-size: 24rpx;
		color: #999;
	}

	.service-item {
		display: flex;
		justify-content: space-between;
	}

	.service-price {
		color: #FF5252;
	}

	.coupon-right {
		margin-left: auto;
		display: flex;
		align-items: center;
	}

	.coupon-value {
		color: #FF5252;
		margin-right: 10rpx;
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.service-contact {
		display: flex;
		align-items: center;
		padding: 0 30rpx;
	}

	.service-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.price-submit {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.total-price {
		margin-right: 30rpx;
	}

	.price {
		color: #FF5252;
		font-weight: 500;
	}

	.submit-btn {
		background: #4080FF;
		color: #FFFFFF;
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
	}

	/* 支付弹窗样式 */
	.pay-popup {
		width: 600rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.pay-header {
		position: relative;
		padding: 30rpx;
		text-align: center;
		border-bottom: 1rpx solid #EEEEEE;
	}

	.close-icon {
		position: absolute;
		left: 30rpx;
		font-size: 40rpx;
		color: #999;
	}

	.pay-title {
		font-size: 32rpx;
		color: #333;
	}

	.pay-content {
		padding: 40rpx 30rpx;
		text-align: center;
	}

	.merchant-name {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.pay-amount {
		font-size: 48rpx;
		font-weight: bold;
		color: #333;
	}

	.payment-method {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #EEEEEE;
		font-size: 28rpx;
	}

	.method-more {
		color: #999;
	}

	.password-input {
		padding: 40rpx 60rpx;
		position: relative;
	}

	.real-input {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		z-index: 1;
	}

	.fake-input {
		display: flex;
		justify-content: space-between;
		height: 100rpx;
	}

	.fake-item {
		width: 70rpx;
		height: 70rpx;
		border: 1rpx solid #DDDDDD;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
	}

	/* 客服弹出层样式 */
	.service-popup {
		background-color: #FFFFFF;
		padding: 40rpx;
		border-radius: 20rpx 20rpx 0 0;
	}

	.service-number {
		text-align: center;
		font-size: 40rpx;
		color: #333;
		margin-bottom: 40rpx;
	}

	.action-buttons {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.action-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		border-radius: 45rpx;
		font-size: 32rpx;
		border: none;
	}

	.copy-btn {
		background: #4080FF;
		color: #FFFFFF;
	}

	.cancel-btn {
		background: #F5F5F5;
		color: #333;
	}
</style>